<template>
	<view class="shop-container">

		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="logo-container" @click="goToStoreDetail">
				<image src="/static/logo.png" mode="aspectFit" class="logo-image"></image>
				<text class="shop-title">{{ currentStore }}</text>
			</view>
			<view class="store-button" @click="switchStore">
				<text>切换门店</text>
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-container">
			<u-search placeholder="搜索商品、品牌" v-model="searchKeyword" @search="searchProducts" @focus="onFocus" @blur="onBlur" shape="round"
				:show-action="false" height="76rpx" bgColor="#fff" :searchIconColor="searchIconColor">
			</u-search>
			
			<view class="search-action-buttons">
				<view class="search-button" @click="searchProducts">
					<text>搜索</text>
				</view>
		</view>

			<!-- 搜索下拉面板 -->
			<view class="search-dropdown" v-if="showHistory && !showResults">
				<!-- 搜索历史 -->
				<view class="search-history" v-if="searchHistory.length > 0 && !searchKeyword">
					<view class="history-header">
						<text class="history-title">搜索历史</text>
						<view class="clear-history" @click="clearSearchHistory">
							<u-icon name="trash" size="18" color="#999"></u-icon>
							<text>清空</text>
						</view>
					</view>
					<view class="history-tags">
						<view 
							class="history-tag" 
							v-for="(item, index) in searchHistory" 
							:key="index"
							@click="useHistoryKeyword(item)"
						>{{ item }}</view>
					</view>
		</view>

				<!-- 搜索热词 -->
				<view class="hot-search" v-if="!searchKeyword || searchKeyword.length < 2">
					<view class="hot-title">热门搜索</view>
					<view class="hot-tags">
						<view 
							class="hot-tag" 
							v-for="(item, index) in hotKeywords" 
							:key="index"
							@click="useHistoryKeyword(item)"
						>{{ item }}</view>
					</view>
				</view>
				
				<!-- 关闭搜索面板按钮 -->
				<view class="close-panel" @click="closeSearchPanel">
					<text>关闭</text>
				</view>
			</view>
		</view>

		<u-notice-bar :text="noticeText" speed="50" bgColor="#FFF5E1" color="#D96D00"></u-notice-bar>

		<!-- 轮播图区域 -->
		<view class="swiper-container">
			<u-swiper
				:list="bannerList"
				indicator
				indicatorActiveColor="#ff6600"
				circular
				autoplay
				radius="10"
				height="350rpx"
				@click="handleSwiperClick"
			></u-swiper>
		</view>

		<!-- 添加分类标题图片区域 -->
		<view class="category-section">
			<view class="category-wrapper">
				<view class="category-box" @click="navigateToCategory(1)">
					<view class="image-container">
						<image src="/static/fenlei/狗狗专区.png" mode="aspectFit" class="category-image"></image>
					</view>
					<text class="category-text">狗狗专区</text>
				</view>

				<view class="category-box" @click="navigateToCategory(2)">
					<view class="image-container">
						<image src="/static/fenlei/猫猫专区.png" mode="aspectFit" class="category-image"></image>
					</view>
					<text class="category-text">猫猫专区</text>
				</view>

				<view class="category-box" @click="navigateToCategory(5)">
					<view class="image-container">
						<image src="/static/fenlei/宠物医疗.png" mode="aspectFit" class="category-image"></image>
					</view>
					<text class="category-text">宠物医疗</text>
				</view>

				<view class="category-box" @click="navigateToCategory(7)">
					<view class="image-container">
						<image src="/static/fenlei/小宠用品.png" mode="aspectFit" class="category-image"></image>
					</view>
					<text class="category-text">小宠用品</text>
				</view>
			</view>
		</view>

		<!-- 搜索结果区域 -->
		<view v-if="showResults" class="search-results-container">
			<view class="results-header">
				<text class="results-title">搜索结果</text>
				<text class="results-count">共找到 {{ searchResults.length }} 个商品</text>
				<view class="close-search" @click="closeSearch">
					<u-icon name="close" size="20" color="#999"></u-icon>
				</view>
			</view>
			
			<view v-if="searchResults.length > 0" class="search-results-list">
				<view class="product-item" v-for="(item, index) in searchResults" :key="index"
					@click="navigateToDetail(item.id)">
					<view class="image-container">
						<image :src="formatImageUrl(item.image)" mode="aspectFit" class="product-image"></image>
						<view v-if="item.discount" class="discount-tag">{{ item.discount }}</view>
					</view>
					<view class="product-info">
						<view class="product-name-row">
							<text class="product-name">{{ item.name }}</text>
						</view>
						<view class="product-meta">
							<text class="product-brand" v-if="item.brandName">{{ item.brandName }}</text>
							<text class="product-category" v-if="item.categoryName">{{ item.categoryName }}</text>
						</view>
						<view class="product-bottom-row">
							<view class="price-container">
								<text class="product-price">¥{{ item.price }}</text>
								<text v-if="item.originalPrice" class="original-price">¥{{ item.originalPrice }}</text>
							</view>
							<text class="product-sales">已售{{ item.sales || 0 }}件</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-else class="empty-results">
				<view class="empty-icon-container">
					<u-icon name="search" size="60" color="#e0e0e0"></u-icon>
				</view>
				<text class="empty-message">抱歉，没有找到与"{{ searchKeyword }}"相关的商品</text>
				<text class="empty-suggestion">您可以尝试：</text>
				<view class="suggestion-list">
					<text>• 检查输入是否正确</text>
					<text>• 尝试使用其他关键词</text>
					<text>• 浏览商品分类查找</text>
				</view>
				<view class="empty-actions">
					<button @click="closeSearch" class="back-btn">返回首页</button>
					<button @click="clearAndFocus" class="retry-btn">重新搜索</button>
				</view>
			</view>
		</view>

		<!-- 热销商品区域 -->
		<view v-if="!showResults" class="hot-products-section">
		<view class="section-title">
			<text>热销商品</text>
			<text class="more" @click="navigateToProductList">更多 ></text>
		</view>

		<view class="product-list">
			<view class="product-item" v-for="(item, index) in hotProducts" :key="index"
				@click="navigateToDetail(item.id)">
				<view class="image-container">
					<image :src="formatImageUrl(item.image)" mode="aspectFit" class="product-image"></image>
				</view>
				<view class="product-info">
					<text class="product-name">{{ item.name }}</text>
					<text class="product-price">¥{{ item.price }}</text>
					<text class="product-sales">已售{{ item.sales }}件</text>
				</view>
			</view>
		</view>
		</view>

		<!-- 添加自定义TabBar组件 -->
		<custom-tab-bar></custom-tab-bar>
	</view>
</template>

<script>
import uSearch from '@/node_modules/uview-ui/components/u-search/u-search.vue'
import uSwiper from '@/node_modules/uview-ui/components/u-swiper/u-swiper.vue'
import uNoticeBar from '@/node_modules/uview-ui/components/u-notice-bar/u-notice-bar.vue'
import uIcon from '@/node_modules/uview-ui/components/u-icon/u-icon.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'

export default {
	components: {
		uSearch,
		uSwiper,
		uNoticeBar,
		uIcon,
		CustomTabBar
	},
	data() {
		return {
			noticeText: '欢迎来到宠物商城，新用户首单立减50元！',
			currentStore: '苏州龙湖狮山店', // 当前选择的门店
			searchKeyword: '', // 搜索关键词
			searchIconColor: '#A1887F', // 搜索框图标颜色
			categories: [],
			hotProducts: [],
			searchResults: [], // 搜索结果列表
			searchHistory: [], // 搜索历史
			showHistory: false, // 是否显示搜索历史
			showResults: false, // 是否显示搜索结果
			keepHistoryOpen: false, // 是否保持历史记录面板打开
			hotKeywords: ['猫粮', '狗粮', '猫砂', '洗澡', '玩具', '零食'],
			// 轮播图图片列表 - 更新为正确的文件路径
			bannerList: [
				'/static/轮播图/微信图片_20250624105300.jpg',
				'/static/轮播图/微信图片_20250624105314.jpg',
				'/static/轮播图/微信图片_20250624105317.jpg',
				'/static/轮播图/微信图片_20250624105320.jpg',
				'/static/轮播图/微信图片_20250624105323.jpg'
			],
			// 仅在请求失败时作为备用数据
			fallbackCategories: [
				{ id: 1, name: '狗狗专区', banner: '/static/狗狗专区.png' },
				{ id: 2, name: '猫猫专区', banner: '/static/猫猫专区.png' },
				{ id: 5, name: '医疗', banner: '/static/药品专区.png' },
				{ id: 7, name: '小宠用品', banner: '/static/小宠专区.png' }
			],
			fallbackProducts: [
				{ id: 101, name: '皇家狗粮幼犬粮2kg', price: 199, sales: 2543, image: '/static/product-1.jpg' },
				{ id: 102, name: '猫咪逗笑激光笔', price: 29.9, sales: 3201, image: '/static/product-2.jpg' },
				{ id: 103, name: '宠物洗澡刷', price: 39, sales: 1205, image: '/static/product-3.jpg' },
				{ id: 104, name: '猫抓板组合', price: 79, sales: 987, image: '/static/product-4.jpg' }
			]
		}
	},
	onLoad() {
		this.loadData();
		// 尝试从本地读取已选择的门店
		const selectedStore = uni.getStorageSync('selectedStore');
		if (selectedStore) {
			this.currentStore = selectedStore.name;
		}
		
		// 加载搜索历史
		this.loadSearchHistory();
	},
	onShow() {
		// 每次显示页面时检查是否有新选择的门店
		const selectedStore = uni.getStorageSync('selectedStore');
		if (selectedStore) {
			this.currentStore = selectedStore.name;
		}
		
		// 更新TabBar选中状态
		uni.$emit('updateTabBar', 0); // 0 表示首页
	},
	methods: {
		// 当搜索框获得焦点时，显示历史记录
		onFocus() {
			// 强制每次点击搜索框都显示下拉面板
			this.showResults = false; // 确保搜索结果不会覆盖下拉面板
			this.showHistory = true;
		},
		
		// 当搜索框失去焦点时
		onBlur() {
			// 延迟隐藏，以便用户可以点击历史记录或热门搜索
			setTimeout(() => {
				// 检查是否点击了搜索下拉面板内的元素
				if (!this.keepHistoryOpen) {
					this.showHistory = false;
				}
			}, 200);
		},
		
		// 关闭搜索面板
		closeSearchPanel() {
			this.showHistory = false;
		},

		handleSwiperClick(index) {
			console.log('点击了轮播图:', index)
			// 这里可以根据index执行跳转等操作
		},
		loadData() {
			// 加载分类数据
			this.loadCategories()
			// 加载热销商品数据
			this.loadHotProducts()
		},
		loadCategories() {
			this.$api.categoryApi.getList()
				.then(res => {
					console.log('分类数据:', res)
					if (res && res.data && res.data.length > 0) {
						// 将API返回的第一个分类名称改为"狗狗专区"
						if (res.data[0]) {
							res.data[0].name = '狗狗专区'
							res.data[0].banner = '/static/狗狗专区.png'
						}
						// 将API返回的第二个分类名称改为"猫猫专区"
						if (res.data[1]) {
							res.data[1].name = '猫猫专区'
							res.data[1].banner = '/static/猫猫专区.png'
						}

						// 过滤掉不需要的分类
						const filteredData = res.data.filter(item => {
							return (!item.name.includes('零食') &&
								!item.name.includes('鱼类') &&
								!item.name.includes('玩具') &&
								!item.name.includes('服饰') &&
								!item.name.includes('宠物服饰') &&
								!(item.name.includes('宠物') && item.name.includes('用品'))) ||
								item.name.includes('小宠')
						})

						// 设置特定分类的图片
						filteredData.forEach(item => {
							if (item.name.includes('医疗') || item.name.includes('药品')) {
								item.banner = '/static/药品专区.png'
							}

							if (item.name.includes('小宠')) {
								item.banner = '/static/小宠专区.png'
							}
						})

						this.categories = filteredData
					} else {
						// 使用备用数据
						this.categories = this.fallbackCategories
						console.log('使用备用分类数据')
					}
				})
				.catch(err => {
					console.error('获取分类失败:', err)
					// 使用备用数据
					this.categories = this.fallbackCategories
					console.log('请求失败，使用备用分类数据')
				})
		},
		loadHotProducts() {
			this.$api.productApi.getList({
				size: 10, // 增加热销商品数量从4个到10个
				sortBy: 'sales', // 按销量排序
				order: 'desc' // 降序
			})
				.then(res => {
					console.log('商品数据:', res)
					if (res && res.data && res.data.length > 0) {
						this.hotProducts = res.data
						// 调试输出：查看图片路径
						console.log('热销商品图片路径:', res.data.map(item => item.image))
					} else {
						// 使用备用数据
						this.hotProducts = this.fallbackProducts
						console.log('使用备用商品数据')
					}
				})
				.catch(err => {
					console.error('获取商品失败:', err)
					// 使用备用数据
					this.hotProducts = this.fallbackProducts
					console.log('请求失败，使用备用商品数据')
				})
		},
		navigateToCategory(id) {
			console.log('导航到分类:', id);

			// 根据不同分类ID跳转到对应的详情页面
			let url = '';

			if (id === 1 || (this.categories[0] && this.categories[0].name === '狗狗专区' && id === this.categories[0].id)) {
				url = '/pages/shop/dog-category';
			} else if (id === 2 || (this.categories[1] && this.categories[1].name === '猫猫专区' && id === this.categories[1].id)) {
				url = '/pages/shop/cat-products';
			} else if (id === 5 || (this.categories[2] && this.categories[2].name === '医疗' && id === this.categories[2].id)) {
				url = '/pages/shop/medical-products';
			} else if (id === 7 || (this.categories.find(item => item.name === '小宠用品' || item.name.includes('小宠')))) {
				url = '/pages/shop/small-pets';
			} else if (id === 102 || (this.categories.find(item => item.name === '狗狗零食' || item.name.includes('狗狗零食')))) {
				url = '/pages/shop/dog-snacks';
			} else if (id === 202 || (this.categories.find(item => item.name === '猫猫零食' || item.name.includes('猫猫零食')))) {
				url = '/pages/shop/cat-snacks';
			} else if (id === 401 || (this.categories.find(item => item.name === '鱼类用品' || item.name.includes('鱼类')))) {
				url = '/pages/shop/fish-products';
			} else {
				url = '/pages/category/index?id=' + id;
			}

			console.log('导航URL:', url);

			// 首先尝试使用navigateTo方法
			uni.navigateTo({
				url: url,
				success: function () {
					console.log('跳转成功:', url);
				},
				fail: function (err) {
					console.error('navigateTo跳转失败:', err);
					// 如果navigateTo失败，尝试使用switchTab
					uni.switchTab({
						url: url,
						success: function () {
							console.log('switchTab跳转成功:', url);
						},
						fail: function (err) {
							console.error('switchTab跳转失败:', err);
							// 如果switchTab也失败，尝试使用redirectTo
							uni.redirectTo({
								url: url,
								success: function () {
									console.log('redirectTo跳转成功:', url);
								},
								fail: function (err) {
									console.error('redirectTo跳转失败:', err);
									uni.showToast({
										title: '跳转失败，请重试',
										icon: 'none'
									});
								}
							});
						}
					});
				}
			});
		},
		navigateToDetail(id) {
			uni.navigateTo({
				url: '/pages/shop/product-detail?id=' + id
			})
		},
		navigateToProductList() {
			uni.navigateTo({
				url: '/pages/product/list'
			})
		},
		searchProducts() {
			if (!this.searchKeyword.trim()) {
				uni.showToast({
					title: '请输入搜索关键词',
					icon: 'none'
				});
				return;
			}

			// 保存搜索关键词到历史记录
			this.saveSearchKeyword(this.searchKeyword);
			
			// 显示加载提示
			uni.showLoading({
				title: '正在搜索...'
			});
			
			// 调用搜索API
			this.$api.productApi.search({
				keyword: this.searchKeyword
			})
			.then(res => {
				uni.hideLoading();
				console.log('搜索结果:', res);
				
				if (res && res.code === 200 && res.data) {
					this.searchResults = res.data;
					this.showResults = true;
					this.showHistory = false;
				} else {
					this.searchResults = [];
					this.showResults = true;
					this.showHistory = false;
				}
			})
			.catch(err => {
				uni.hideLoading();
				console.error('搜索失败:', err);
				uni.showToast({
					title: '搜索失败，请重试',
					icon: 'none'
				});
				this.searchResults = [];
			});
		},
		
		// 关闭搜索结果
		closeSearch() {
			this.showResults = false;
			this.searchKeyword = '';
			this.showHistory = false;
		},
		
		// 清空搜索框并聚焦
		clearAndFocus() {
			this.searchKeyword = '';
			this.showResults = false;
			this.showHistory = true;
			
			// 提示用户点击搜索框
			uni.showToast({
				title: '请点击搜索框重新搜索',
				icon: 'none',
				duration: 2000
			});
		},
		
		// 使用历史搜索关键词
		useHistoryKeyword(keyword) {
			this.keepHistoryOpen = true;  // 标记需要保持面板打开
			this.searchKeyword = keyword;
			this.searchProducts();
			this.keepHistoryOpen = false; // 搜索后重置标记
		},
		
		// 保存搜索关键词到历史记录
		saveSearchKeyword(keyword) {
			if (!keyword.trim()) return;
			
			// 获取当前历史记录
			let history = this.searchHistory || [];
			
			// 如果已存在，先移除
			const index = history.findIndex(item => item === keyword);
			if (index !== -1) {
				history.splice(index, 1);
			}
			
			// 添加到开头
			history.unshift(keyword);
			
			// 限制历史记录数量
			if (history.length > 10) {
				history = history.slice(0, 10);
			}
			
			// 保存到本地存储
			this.searchHistory = history;
			uni.setStorageSync('searchHistory', history);
		},
		
		// 加载搜索历史
		loadSearchHistory() {
			const history = uni.getStorageSync('searchHistory');
			this.searchHistory = history || [];
		},
		
		// 清空搜索历史
		clearSearchHistory() {
			uni.showModal({
				title: '提示',
				content: '确定要清空搜索历史吗？',
				success: (res) => {
					if (res.confirm) {
						this.searchHistory = [];
						uni.removeStorageSync('searchHistory');
						uni.showToast({
							title: '已清空搜索历史',
							icon: 'none'
						});
					}
				}
			});
		},
		// 添加切换门店方法
		switchStore() {
			uni.navigateTo({
				url: '/pages/map-list/index'
			});
		},
		
		// 跳转到门店详情页
		goToStoreDetail() {
			// 从本地存储获取当前门店ID，如果没有则使用默认ID 1
			const selectedStore = uni.getStorageSync('selectedStore');
			const storeId = selectedStore ? selectedStore.id : '1';
			
			uni.navigateTo({
				url: '/pages/store/detail?id=' + storeId
			});
		},
		formatImageUrl(imageUrl) {
			if (!imageUrl) {
				console.log('图片URL为空，使用默认图片');
				return '/static/product-default.jpg';
			}
			
			console.log('处理图片URL:', imageUrl);
			
			// 处理Windows绝对路径
			if (imageUrl.includes('\\') || imageUrl.includes(':\\')) {
				// 从绝对路径中提取文件名
				const parts = imageUrl.split('\\');
				const filename = parts[parts.length - 1];
				// 使用相对路径访问
				console.log('处理Windows路径，提取文件名:', filename);
				return 'http://localhost:8081/images/' + filename;
			}
			
			// 处理相对路径
			if (imageUrl.startsWith('/')) {
				console.log('处理相对路径:', 'http://localhost:8081' + imageUrl);
				return 'http://localhost:8081' + imageUrl;
			}
			
			// 已经是完整URL
			if (imageUrl.startsWith('http')) {
				console.log('使用完整URL:', imageUrl);
				return imageUrl;
			}
			
			console.log('使用默认处理:', '/static/product-default.jpg');
			// 默认使用静态资源
			return '/static/product-default.jpg';
		}
	}
}
</script>

<style lang="scss">
.shop-container {
	padding: 20rpx 30rpx;
	background-color: $page-bg-color;
	min-height: 100vh;

	// 顶部标题栏样式
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 0 30rpx 0;
		margin-bottom: 10rpx;

		.logo-container {
			display: flex;
			align-items: center;

			.logo-image {
				width: 88rpx;
				height: 88rpx;
				margin-right: 20rpx;
			}

			.shop-title {
				font-size: 38rpx;
				font-weight: bold;
				color: $text-primary-color;
			}
		}

		.store-button {
			padding: 12rpx 24rpx;
			border: 2rpx solid #E0E0E0;
			border-radius: 30rpx;
			font-size: 26rpx;
			color: $text-primary-color;
			background-color: $card-bg-color;
			box-shadow: $shadow;
		}
	}

	.search-container {
		padding: 0 0 30rpx 0;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 100;

		/deep/ .u-search {
			flex: 1;
			margin-right: 20rpx;
			
			&__content {
				box-shadow: $shadow;
				border: none !important;
			}
		}
		
		.search-action-buttons {
			display: flex;
			align-items: center;
			
			.search-button {
				background-color: $theme-color;
				color: #FFFFFF;
				height: 76rpx;
				border-radius: 38rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 500;
				box-shadow: 0 4rpx 8rpx rgba(255, 112, 67, 0.3);
				
				&:active {
					opacity: 0.8;
					transform: scale(0.98);
				}
			}
		}
		
		// 搜索下拉面板
		.search-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background-color: $card-bg-color;
			border-radius: 0 0 20rpx 20rpx;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx 20rpx;
			z-index: 99;
			margin-top: -10rpx;
			animation: dropDown 0.3s ease;
			
			// 关闭面板按钮
			.close-panel {
				text-align: center;
				padding: 20rpx 0 0;
				border-top: 2rpx solid #f5f5f5;
				margin-top: 20rpx;
				
				text {
				font-size: 28rpx;
					color: $text-secondary-color;
					padding: 10rpx 40rpx;
					border-radius: 30rpx;
					
					&:active {
						background-color: #f0f0f0;
					}
				}
			}
		}
	}

	.swiper-container {
		margin-bottom: 30rpx;
		box-shadow: $shadow;
		border-radius: 20rpx;
		overflow: hidden;
	}

	/deep/ .u-notice-bar {
		margin-bottom: 30rpx;
		border-radius: 12rpx !important;
	}

	.category-section {
		margin-bottom: 20rpx;
		background-color: $card-bg-color;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: $shadow;

		.category-wrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.category-box {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.image-container {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 15rpx;
					background-color: $page-bg-color;
					border-radius: 50%;
				}

				.category-image {
					max-width: 60%;
					max-height: 60%;
				}

				.category-text {
					font-size: 26rpx;
					color: $text-primary-color;
					text-align: center;
				}
			}
		}
	}

	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 10rpx;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: $text-primary-color;
		}

		.more {
			font-size: 26rpx;
			color: $text-secondary-color;
			font-weight: normal;
		}
	}

	@keyframes dropDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	// 搜索历史样式
	.search-history, .hot-search {
		padding: 20rpx 10rpx;
		margin-bottom: 30rpx;
		
		.history-header, .hot-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.history-title {
				font-size: 28rpx;
				color: $text-primary-color;
				font-weight: bold;
			}
			
			.clear-history {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: $text-secondary-color;
				
				text {
					margin-left: 6rpx;
				}
			}
		}
		
		.hot-title {
			font-size: 28rpx;
			color: $text-primary-color;
			font-weight: bold;
		}
		
		.history-tags, .hot-tags {
		display: flex;
		flex-wrap: wrap;
			
			.history-tag, .hot-tag {
				padding: 10rpx 24rpx;
				background-color: $page-bg-color;
				border-radius: 30rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				font-size: 24rpx;
				color: $text-secondary-color;
				
				&:active {
					background-color: rgba(255, 112, 67, 0.1);
					color: $theme-color;
				}
			}
			
			.hot-tag {
				background-color: #FFF5E1;
				color: #D96D00;
				
				&:active {
					background-color: #FFE4CC;
				}
			}
		}
	}
	
	// 搜索结果样式
	.search-results-container {
		margin-top: 20rpx;
		padding-bottom: 120rpx;
		
		.results-header {
			display: flex;
		justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 16rpx 20rpx;
			background-color: $card-bg-color;
			border-radius: 16rpx;
			box-shadow: $shadow;
			
			.results-title {
				font-size: 32rpx;
				font-weight: bold;
				color: $text-primary-color;
			}
			
			.results-count {
				font-size: 24rpx;
				color: $text-secondary-color;
				background-color: rgba(255, 112, 67, 0.1);
				padding: 6rpx 16rpx;
				border-radius: 30rpx;
			}
			
			.close-search {
				padding: 10rpx;
			}
		}
		
		.search-results-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.product-item {
			width: 48.5%;
			background-color: $card-bg-color;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 25rpx;
			box-shadow: $shadow;
			display: flex;
			flex-direction: column;
			position: relative;
			
			.image-container {
				width: 100%;
				height: 320rpx;
				background-color: #F8F8F8;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.discount-tag {
					position: absolute;
					top: 0;
					right: 0;
					background-color: $theme-color;
					color: white;
					font-size: 22rpx;
					padding: 6rpx 16rpx;
					border-bottom-left-radius: 16rpx;
				}
			}
			
			.product-image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.product-info {
				padding: 20rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.product-name-row {
				.product-name {
					font-size: 28rpx;
						color: $text-primary-color;
					line-height: 1.4;
						min-height: 78rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
						margin-bottom: 10rpx;
					}
				}
				
				.product-meta {
					display: flex;
					margin-bottom: 15rpx;
					flex-wrap: wrap;
					
					.product-brand, .product-category {
						font-size: 22rpx;
						background-color: #F5F5F5;
						color: $text-secondary-color;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						margin-right: 12rpx;
						margin-bottom: 8rpx;
					}
				}
				
				.product-bottom-row {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					
					.price-container {
						display: flex;
						flex-direction: column;

				.product-price {
							font-size: 34rpx;
							color: $theme-color;
					font-weight: bold;
				}

						.original-price {
					font-size: 22rpx;
							color: $text-secondary-color;
							text-decoration: line-through;
							margin-top: 4rpx;
						}
					}
					
					.product-sales {
						font-size: 22rpx;
						color: $text-secondary-color;
					}
				}
			}
		}
		
		.empty-results {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 0;
			background-color: $card-bg-color;
			border-radius: 16rpx;
			box-shadow: $shadow;
			margin-top: 20rpx;
			
			.empty-icon-container {
				margin-bottom: 30rpx;
				padding: 30rpx;
				background-color: #f8f8f8;
				border-radius: 50%;
			}
			
			.empty-message {
				margin-bottom: 30rpx;
				color: $text-primary-color;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
			}
			
			.empty-suggestion {
				color: $text-secondary-color;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
			
			.suggestion-list {
				width: 80%;
				margin: 0 auto 40rpx;
				
				text {
					display: block;
					color: $text-secondary-color;
					font-size: 26rpx;
					margin-bottom: 10rpx;
					line-height: 1.5;
				}
			}
			
			.empty-actions {
				display: flex;
				justify-content: center;
				width: 100%;
				
				button {
					margin: 0 20rpx;
				}
				
				.back-btn {
					padding: 20rpx 40rpx;
					background-color: $theme-color;
					color: #fff;
					border-radius: 40rpx;
					font-size: 28rpx;
					border: none;
				}
				
				.retry-btn {
					padding: 20rpx 40rpx;
					background-color: #fff;
					color: $theme-color;
					border-radius: 40rpx;
					font-size: 28rpx;
					border: 2rpx solid $theme-color;
				}
			}
		}
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.product-item {
			width: 48.5%;
			background-color: $card-bg-color;
			border-radius: 16rpx;
			overflow: hidden;
			margin-bottom: 25rpx;
			box-shadow: $shadow;
			display: flex;
			flex-direction: column;

			.image-container {
				width: 100%;
				height: 320rpx;
				background-color: #F8F8F8;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.product-image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}

			.product-info {
				padding: 20rpx;
				flex-grow: 1;
				display: flex;
				flex-direction: column;

				.product-name {
					font-size: 28rpx;
					color: $text-primary-color;
					line-height: 1.4;
					min-height: 78rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 10rpx;
				}

				.product-sales {
					font-size: 24rpx;
					color: $text-secondary-color;
					display: block;
					margin-bottom: auto;
				}

				.product-price {
					font-size: 34rpx;
					color: $theme-color;
					font-weight: bold;
					margin-top: 15rpx;
					display: block;
				}
			}
		}
	}
}
</style>